<template>
    <div class="card">
        <el-button type="primary" v-preventReClick="handleClick">点击</el-button>

        <p>count是{{ store.getters.getCount}}</p>
        <p>接收的props:{{ msg }}</p>
        <p>user属性拼接:{{ userInfo}}</p>
        <p>使用user getters:{{store.getters['user/getUserInfo']}}</p>
        <button  @click="addOne">count is {{ store.state.count }}</button><br/>
        <button @click="store.dispatch('addAsync')">异步加</button><br/>
        <button @click="store.dispatch('addAsyncPayload',2)">异步加2</button><br/>
        <button @click="store.commit('user/addAge')">addAge</button><br/>
        <button @click="store.commit('user/addAgeLoad',2)">addAgeLoad2</button><br/>
        <button @click="store.dispatch('user/addAgeAction')">addAgeAction</button><br/>
        <button @click="store.dispatch('user/addAgeLoadAction',5)">addAgeLoadAction5</button><br/>
        <p>mapState: {{countObj.count}}</p>
        <p>mapGetters: {{countGetterObj.getCount}}</p>
        <Pagination
            :total="total"
            :pageObj="pageObj"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { computed, useAttrs, useSlots } from 'vue'
import { useStore, mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import Pagination from 'comps/Pagination/index.vue'
let pageObj = {
    pageNum: 1,
    pageSize: 10
}
const handleClick = () => {
    console.log('1111')
}
const total = 0
const handleSizeChange = (val) => {
    pageObj = {
        pageNUm: 1,
        pageSize: val
    }
}
const handleCurrentChange = (val) => {
    pageObj.pageNum = val
}
const store = useStore()
// console.log(store)

// 1.定义属性
const props = defineProps({
    msg: String
})
console.log('props', props)

// 2.定义事件
const emit = defineEmits(['show'])

// 3.获取attrs : 父组件绑定下来的数据没有被指定为props的属性
const attrs = useAttrs()
console.log(attrs)

// 4.获取插槽
const slots = useSlots()
console.log(slots)

const mapCount = mapState(['count'])
// console.log(mapCount)

const mapCountGetter = mapGetters(['getCount'])
// console.log('00',mapCountGetter)

const mapCountMutaions = mapMutations(['add', 'addPayLoad'])
// console.log(mapcountMutaions)

const mapCountActions = mapActions(['addAsync', 'addAsyncPayload'])
console.log(mapCountActions)

const countObj = {}
Object.keys(mapCount).forEach(key => {
    // 通过bind绑定this
    const fn = mapCount[key].bind({ $store: store })
    countObj[key] = computed(fn)
})
// console.log(countObj)

const countGetterObj = {}
Object.keys(mapCountGetter).forEach(key => {
    const fn = mapCountGetter[key].bind({ $store: store })
    countGetterObj[key] = computed(fn)
})
// console.log(store.getters.getCount, 'b')
// console.log('11',countGetterObj['getCount'])

const countMutaionsObj = {}
Object.keys(mapCountMutaions).forEach(key => {
    const fn = mapCountMutaions[key].bind({ $store: store })
    countMutaionsObj[key] = fn
})
// console.log('11', countMutaionsObj)

const countActionsObj = {}
Object.keys(mapCountActions).forEach(key => {
    const fn = mapCountActions[key].bind({ $store: store })
    countActionsObj[key] = fn
})
// console.log('11', countActionsObj)

const addOne = () => {
    store.commit('add')
    // countMutaionsObj.add();
    // countActionsObj.addAsync();
    // countActionsObj.addAsyncPayload(5);
    emit('show', '子组件传的值')
}

const userInfo = computed(() => store.state.user.name + '-' + store.state.user.age + '-' + store.state.user.gender + '-' + store.state.user.profession)
</script>
